import React, { Component } from 'react';
import { Card, Button, Modal } from 'antd';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

import draftToHtml from 'draftjs-to-html';//将输入的内容转为html模版

class RichText extends Component {
	state = {
		showRichText: false
	}
	
	//编辑器状态
	onEditorStateChange = (editorState) => {
		this.setState({
			editorState
		})
	}
	
	//内容状态，contentState是有输入的内容
	onEditorChange = (contentState) => {
		this.setState({
			contentState
		})
	}
	
	//清空内容
	handleClearContent = () =>{
		this.setState({
			editorState: ""
		})
	}
	
	//获取内容
	handleGetContent = () =>{
		this.setState({
			showRichText: true
		})
	}
	
	render(){
		const { editorState } = this.state;
		return (
			<div style={{width: '100%'}}>
				<Card>
					<Button type="primary" onClick={this.handleClearContent}>清空内容</Button>&nbsp;
					<Button type="primary" onClick={this.handleGetContent}>获取HTML内容</Button>
				</Card>
				<Card title="富文本编辑器" style={{width: '100%'}}>
					<Editor
						editorState={editorState}
						onContentStateChange={this.onEditorChange}
						onEditorStateChange={this.onEditorStateChange}
					/>
				</Card>
				<Modal
					title="富文本"
					visible={this.state.showRichText}
					onCancel={()=>{
						this.setState({
							showRichText: false
						})
					}}
					footer={null}
				>
					{draftToHtml(this.state.contentState)}
				</Modal>
			</div>
		)
	}
}

export default RichText;